import { message } from 'ant-design-vue'
import { fabric } from 'fabric'
import { hexToRgba, isEqual } from 'g6-fn'

import { MarkObj } from '../types'

type MarkInImageReturnObj = {
  markObj: MarkObj | null // 裁剪后的标注对象
  isOutImg: boolean // 是否超出画布
  isValidity: boolean // 是否有效（整体超出画布）
}

/* 绘制完图形以后，将完全不在画布的图形删除， 将部分在画布的图形进行裁剪 */
export const markInImage = (canvas: fabric.Canvas, imgObj: fabric.Image, markObj: MarkObj, imgScale: number): MarkInImageReturnObj => {
  if (imgObj.width === undefined || imgObj.height === undefined || imgObj.left === undefined || imgObj.top === undefined) {
    message.error('图片加载未完成，请刷新页面重试')
    return { isValidity: false, markObj: null, isOutImg: true }
  }
  if (markObj.width === undefined || markObj.height === undefined || markObj.left === undefined || markObj.top === undefined) {
    message.error('标注元素有误，请刷新页面重试')
    return { isValidity: false, markObj: null, isOutImg: true }
  }

  const imageLeft = imgObj.left
  const imageTop = imgObj.top
  const imageWidth = imgObj.width * imgScale
  const imageHeight = imgObj.height * imgScale

  const clipRect = new fabric.Rect({
    left: imageLeft,
    top: imageTop,
    width: imageWidth,
    height: imageHeight
  })

  if (markObj.type === 'rect') {
    const boundingRectPoints = [
      { x: markObj.left, y: markObj.top },
      { x: markObj.left + markObj.width, y: markObj.top },
      { x: markObj.left, y: markObj.top + markObj.height },
      { x: markObj.left + markObj.width, y: markObj.top + markObj.height }
    ]
    // Check if all four corners of the bounding rectangle are inside the image
    const isInImage = boundingRectPoints.every(point => {
      return point.x >= imageLeft && point.x <= imageLeft + imageWidth && point.y >= imageTop && point.y <= imageTop + imageHeight
    })
    console.log('isInImage', isInImage)

    const isNoneInImage = boundingRectPoints.every((point: any) => {
      return point.x <= imageLeft || point.x >= imageLeft + imageWidth || point.y <= imageTop || point.y >= imageTop + imageHeight
    })
    if (isNoneInImage) {
      return { isValidity: false, markObj: null, isOutImg: true }
    }

    if (!isInImage) {
      boundingRectPoints.forEach(point => {
        if (point.x < imageLeft) {
          point.x = imageLeft
        }
        if (point.x > imageLeft + imageWidth) {
          point.x = imageLeft + imageWidth
        }
        if (point.y < imageTop) {
          point.y = imageTop
        }
        if (point.y > imageTop + imageHeight) {
          point.y = imageTop + imageHeight
        }
      })
      const newWidth = boundingRectPoints[1].x - boundingRectPoints[0].x
      const newHeight = boundingRectPoints[2].y - boundingRectPoints[0].y
      markObj.set({
        left: boundingRectPoints[0].x,
        top: boundingRectPoints[0].y,
        type: markObj.type,
        width: newWidth,
        height: newHeight
      })
    }
    return { isValidity: true, markObj, isOutImg: !isInImage }
  } else if (markObj.type === 'circle') {
    let boundingRectPoints: any[] = []
    boundingRectPoints = [
      { x: markObj.left, y: markObj.top },
      { x: markObj.left + markObj.radius * 2, y: markObj.top },
      { x: markObj.left + markObj.radius * 2, y: markObj.top + markObj.radius * 2 },
      { x: markObj.left, y: markObj.top + markObj.radius * 2 }
    ]
    const compareRect = new fabric.Rect({
      left: boundingRectPoints[0].x,
      top: boundingRectPoints[0].y,
      width: boundingRectPoints[1].x - boundingRectPoints[0].x,
      height: boundingRectPoints[2].y - boundingRectPoints[0].y
    })
    if (!compareRect.intersectsWithObject(clipRect)) {
      return { isValidity: false, markObj: null, isOutImg: true }
    }

    // Check if all four corners of the bounding rectangle are inside the image
    const isInImage = boundingRectPoints.every(point => {
      return point.x >= imageLeft && point.x <= imageLeft + imageWidth && point.y >= imageTop && point.y <= imageTop + imageHeight
    })
    if (!isInImage) {
      boundingRectPoints.forEach(point => {
        if (point.x < imageLeft) {
          point.x = imageLeft
        }
        if (point.x > imageLeft + imageWidth) {
          point.x = imageLeft + imageWidth
        }
        if (point.y < imageTop) {
          point.y = imageTop
        }
        if (point.y > imageTop + imageHeight) {
          point.y = imageTop + imageHeight
        }
      })

      const radius =
        Math.min(Math.abs(boundingRectPoints[0].x - boundingRectPoints[2].x), Math.abs(boundingRectPoints[0].y - boundingRectPoints[2].y)) /
        2
      if (radius < 5) {
        return { isValidity: false, markObj: null, isOutImg: true }
      }

      markObj.set({
        left: boundingRectPoints[0].x,
        top: boundingRectPoints[0].y,
        type: markObj.type,
        radius: radius
      })
    }
    return { isValidity: true, markObj: markObj, isOutImg: !isInImage }
  } else if (markObj.type === 'point') {
    const point = markObj.getCenterPoint()
    const isInside = clipRect.containsPoint(point)
    return { isValidity: isInside, markObj: isInside ? markObj : null, isOutImg: !isInside }
  } else if (markObj.type === 'polygon') {
    let boundingRectPoints: any[] = []
    if (markObj.oCoords) {
      markObj.left
      const tlCoordXy = markObj.tlCoordXy || []
      markObj.left
      const newPoints = markObj.points.map((point: { x: number; y: number }) => {
        const offsetX = point.x - tlCoordXy[0]
        const offsetY = point.y - tlCoordXy[1]
        return { x: offsetX + (markObj.left || 0), y: offsetY + (markObj.top || 0) }
      })

      boundingRectPoints = newPoints
    } else {
      boundingRectPoints = markObj.points
    }

    const isNoneInImage = boundingRectPoints.every((point: any) => {
      return point.x <= imageLeft || point.x >= imageLeft + imageWidth || point.y <= imageTop || point.y >= imageTop + imageHeight
    })
    // '没有完全在图形内'
    if (isNoneInImage) {
      return { isValidity: false, markObj: null, isOutImg: true }
    }
    let _isOutImg = false
    boundingRectPoints.forEach((point: any) => {
      if (point.x < imageLeft) {
        point.x = imageLeft
        _isOutImg = true
      } else if (point.x > imageLeft + imageWidth) {
        point.x = imageLeft + imageWidth
        _isOutImg = true
      }
      if (point.y < imageTop) {
        point.y = imageTop
        _isOutImg = true
      } else if (point.y > imageTop + imageHeight) {
        point.y = imageTop + imageHeight
        _isOutImg = true
      }
    })
    const newMark = new fabric.Polygon(boundingRectPoints, { type: markObj.type }) as any
    newMark.set({
      stroke: markObj.stroke,
      fill: markObj.fill,
      tlCoordXy: [newMark.left!, newMark.top!]
    })

    return { isValidity: true, markObj: newMark, isOutImg: _isOutImg }
  } else if (markObj.type === 'line' || markObj.type === 'dottedLine') {
    const boundingRectPoints = [
      { x: markObj.x1, y: markObj.y1 },
      { x: markObj.x2, y: markObj.y2 }
    ]

    const isNoInImage = boundingRectPoints.every(
      point => point.x <= imageLeft || point.x >= imageLeft + imageWidth || point.y <= imageTop || point.y >= imageTop + imageHeight
    )

    if (isNoInImage) {
      return { isValidity: false, markObj: null, isOutImg: true }
    }

    let _isOutImg = false
    boundingRectPoints.forEach(point => {
      if (point.x < imageLeft) {
        point.x = imageLeft
        _isOutImg = true
      }
      if (point.x > imageLeft + imageWidth) {
        point.x = imageLeft + imageWidth
        _isOutImg = true
      }
      if (point.y < imageTop) {
        point.y = imageTop
        _isOutImg = true
      }
      if (point.y > imageTop + imageHeight) {
        point.y = imageTop + imageHeight
        _isOutImg = true
      }
    })

    markObj.set({
      x1: boundingRectPoints[0].x,
      y1: boundingRectPoints[0].y,
      x2: boundingRectPoints[1].x,
      y2: boundingRectPoints[1].y,
      left: Math.min(boundingRectPoints[0].x, boundingRectPoints[1].x),
      top: Math.min(boundingRectPoints[0].y, boundingRectPoints[1].y)
    })

    // const newLine = deepCloneFabricObject(markObj)
    // newLine.set({
    //   markTagInfo: markObj.markTagInfo
    // })

    const { x1, x2, y1, y2 } = markObj
    let direction = ''
    if (x1 < x2 && y1 < y2) {
      direction = 'leftToRightTopToBottom'
    } else if (x1 > x2 && y1 < y2) {
      direction = 'rightToLeftTopToBottom'
    } else if (x1 < x2 && y1 > y2) {
      direction = 'leftToRightBottomToTop'
    } else if (x1 > x2 && y1 > y2) {
      direction = 'rightToLeftBottomToTop'
    }
    markObj.set({
      // lockScalingFlip: true,
      direction: direction
    })
    return { isValidity: true, markObj: markObj, isOutImg: _isOutImg }
  } else {
    return { isValidity: false, markObj: null, isOutImg: true }
  }
}

type Point = [number, number]
// 使用基于canvas画布的坐标 获取标注基于图片的坐标
export function getMarkPosition(imageObj: fabric.Image, points: any[], imgScale: number, type: string): Point[] {
  // 获取图片的位置xy
  const imgLeft = imageObj.left
  const imgTop = imageObj.top
  if (imgLeft === undefined || imgTop === undefined) {
    return points.map(() => [0, 0])
  }
  // 获取标注的位置xy
  if (type === 'rect' || type === 'polygon' || type === 'line' || type === 'dottedLine') {
    points.forEach((point: any) => {
      // 标注基于图片的位置 = 标注的位置xy - 图片的位置xy
      point[0] = (point[0] - imgLeft) / imgScale
      point[1] = (point[1] - imgTop) / imgScale
    })
  } else if (type === 'circle') {
    points[0][0] = (points[0][0] - imgLeft) / imgScale
    points[0][1] = (points[0][1] - imgTop) / imgScale
    points[1] = points[1] / imgScale
  } else if (type === 'point') {
    points[0] = (points[0] - imgLeft) / imgScale
    points[1] = (points[1] - imgTop) / imgScale
  }

  return points
}

//  使用基于图片的坐标 得到标注基于canvas的坐标
export function markPositionInCanvas(imageObj: any, point: any, imgScale: any, type: string) {
  // 获取图片的位置xy
  const imgLeft = imageObj.left
  const imgTop = imageObj.top

  const points = JSON.parse(JSON.stringify(point))
  // 得到标注基于图片的坐标xy
  if (type === 'rect' || type === 'polygon' || type === 'line' || type === 'dottedLine') {
    points.forEach((point: any) => {
      point[0] = point[0] * imgScale + imgLeft
      point[1] = point[1] * imgScale + imgTop
    })
  } else if (type === 'circle') {
    points[0][0] = points[0][0] * imgScale + imgLeft
    points[0][1] = points[0][1] * imgScale + imgTop
    points[1] = points[1] * imgScale
  } else if (type === 'point') {
    points[0] = points[0] * imgScale + imgLeft
    points[1] = points[1] * imgScale + imgTop
  }
  return points
  // 标注的位置xy = 标注基于图片的坐标xy + 图片的位置xy
}

// 使用标注对象 获取标注基于canvas的坐标
export function getMarkPositionInCanvas(markObj: any) {
  let points = []
  if (markObj.type === 'rect') {
    points.push([markObj.left, markObj.top])
    points.push([markObj.left + markObj.width, markObj.top + markObj.height])
    return points
  }
  if (markObj.type === 'circle') {
    let centerPoint = markObj.getCenterPoint()
    const radius = markObj.radius
    centerPoint = [centerPoint.x, centerPoint.y]
    points = [centerPoint, radius]
    return points
  }
  if (markObj.type === 'polygon') {
    const oCoords = markObj.points
    const endPoints: any[] = []
    for (const key in oCoords) {
      endPoints.push([oCoords[key].x, oCoords[key].y])
    }
    points = endPoints
    return points
  }
  if (markObj.type === 'point') {
    points = [markObj.getCenterPoint().x, markObj.getCenterPoint().y]
    return points
  }
  if (markObj.type === 'line' || markObj.type === 'dottedLine') {
    points = [
      [markObj.x1, markObj.y1],
      [markObj.x2, markObj.y2]
    ]
    return points
  }
}

type MarkType = 'rect' | 'circle' | 'polygon' | 'point' | 'line' | 'dottedLine'
// 使用基于canvas坐标，绘制标注
export function drawMarkInCanvas(markTagInfo: any, type: MarkType, points: any): MarkObj | null {
  let drawObject: MarkObj
  /* 根据不同类型进行绘制 */
  switch (type) {
    case 'rect':
      drawObject = new fabric.Rect({
        left: points[0][0],
        top: points[0][1],
        width: points[1][0] - points[0][0],
        height: points[1][1] - points[0][1],
        fill: hexToRgba(markTagInfo.color, 0.375).rgba,
        stroke: markTagInfo.color,
        type: type,
        selectable: false
      })
      break
    case 'circle':
      drawObject = new fabric.Circle({
        left: points[0][0] - points[1],
        top: points[0][1] - points[1],
        radius: points[1],
        fill: hexToRgba(markTagInfo.color, 0.375).rgba,
        stroke: markTagInfo.color,
        selectable: false,
        type: type
      })
      break
    case 'polygon':
      const drawPoints = points.map((item: any) => {
        return { x: item[0], y: item[1] }
      })
      drawObject = new fabric.Polygon(drawPoints) as any
      drawObject.set({
        tlCoordXy: [drawObject.left!, drawObject.top!],
        objectCaching: false,
        transparentCorners: false,
        hasBorders: false,
        fill: hexToRgba(markTagInfo.color, 0.375).rgba,
        stroke: markTagInfo.color,
        selectable: false,
        type: type
      })
      break
    case 'line':
    case 'dottedLine':
      drawObject = new fabric.Line(
        [
          points[0][0],
          points[0][1], // 起始点坐标
          points[1][0],
          points[1][1] // 结束点坐标
        ],
        {
          type: type,
          strokeDashArray: type === 'dottedLine' ? [5, 5] : []
        }
      )
      drawObject.setControlsVisibility({
        mt: false,
        mb: false,
        ml: false,
        mr: false
      })
      const { x1, x2, y1, y2 } = drawObject
      let direction = ''
      if (x1 < x2 && y1 < y2) {
        direction = 'leftToRightTopToBottom'
      } else if (x1 > x2 && y1 < y2) {
        direction = 'rightToLeftTopToBottom'
      } else if (x1 < x2 && y1 > y2) {
        direction = 'leftToRightBottomToTop'
      } else if (x1 > x2 && y1 > y2) {
        direction = 'rightToLeftBottomToTop'
      }
      drawObject.set({
        lockScalingFlip: true,
        fill: hexToRgba(markTagInfo.color, 0.375).rgba,
        stroke: markTagInfo.color,
        selectable: false,
        direction: direction
      })
      break
    case 'point':
      drawObject = new fabric.Circle({
        left: points[0] - 5,
        top: points[1] - 5,
        fill: markTagInfo.color,
        stroke: markTagInfo.color,
        strokeWidth: 0,
        radius: 5,
        selectable: false, // 允许选中
        hasControls: true, // 显示控制点
        hasBorders: false, // 不显示边框
        type: type
      })

      drawObject!.setControlsVisibility({
        mt: false,
        mb: false,
        ml: false,
        mr: false,
        bl: false,
        br: false,
        tl: false,
        tr: false
      })
      break
    default:
      return null
  }

  drawObject.markTagInfo = markTagInfo

  return drawObject
}

function getObjectSizeWithStroke(object: any) {
  const stroke = new fabric.Point(object.strokeUniform ? 1 / object.scaleX : 1, object.strokeUniform ? 1 / object.scaleY : 1).multiply(
    object.strokeWidth
  )
  return new fabric.Point(object.width + stroke.x, object.height + stroke.y)
}

export function polygonPositionHandler(
  this: {
    positionHandler: (dim: any, finalMatrix: any, fabricObject: any) => fabric.Point
    actionHandler: (eventData: any, transform: any, x: any, y: any) => any
    actionName: string
    pointIndex: number
  },
  dim: any,
  finalMatrix: any,
  fabricObject: any
) {
  const x = fabricObject.points[this.pointIndex].x - fabricObject.pathOffset.x,
    y = fabricObject.points[this.pointIndex].y - fabricObject.pathOffset.y
  return fabric.util.transformPoint(
    new fabric.Point(x, y),
    fabric.util.multiplyTransformMatrices(fabricObject.canvas.viewportTransform, fabricObject.calcTransformMatrix())
  )
}

export function actionHandler(eventData: any, transform: any, x: any, y: any) {
  const polygon = transform.target,
    currentControl = polygon.controls[polygon.__corner],
    mouseLocalPosition = polygon.toLocalPoint(new fabric.Point(x, y), 'center', 'center'),
    polygonBaseSize = getObjectSizeWithStroke(polygon),
    size = polygon._getTransformedDimensions(0, 0),
    finalPointPosition = {
      x: (mouseLocalPosition.x * polygonBaseSize.x) / size.x + polygon.pathOffset.x,
      y: (mouseLocalPosition.y * polygonBaseSize.y) / size.y + polygon.pathOffset.y
    }

  polygon.points[currentControl.pointIndex] = finalPointPosition
  return true
}

export function anchorWrapper(anchorIndex: any, fn: any) {
  return function (eventData: any, transform: any, x: any, y: any) {
    const fabricObject = transform.target,
      absolutePoint = fabric.util.transformPoint(
        new fabric.Point(
          fabricObject.points[anchorIndex].x - fabricObject.pathOffset.x,
          fabricObject.points[anchorIndex].y - fabricObject.pathOffset.y
        ),

        fabricObject.calcTransformMatrix()
      ),
      actionPerformed = fn(eventData, transform, x, y),
      // newDim = fabricObject._setPositionDimensions({}),
      polygonBaseSize = getObjectSizeWithStroke(fabricObject),
      newX = (fabricObject.points[anchorIndex].x - fabricObject.pathOffset.x) / polygonBaseSize.x,
      newY = (fabricObject.points[anchorIndex].y - fabricObject.pathOffset.y) / polygonBaseSize.y
    fabricObject.setPositionByOrigin(absolutePoint, newX + 0.5, newY + 0.5)
    return actionPerformed
  }
}

// @ts-ignore fabric深拷贝
export const deepCloneFabricObject = (obj: MarkObj): MarkObj => {
  const type = obj.type as MarkType
  if (type === 'rect') {
    return new fabric.Rect({
      left: obj.left,
      top: obj.top,
      width: obj.width,
      height: obj.height,
      fill: obj.fill,
      stroke: obj.stroke,
      type: obj.type
    })
  }
  if (type === 'circle') {
    return new fabric.Circle({
      left: obj.left,
      top: obj.top,
      fill: obj.fill,
      stroke: obj.stroke,
      type: obj.type,
      radius: obj.radius
    })
  }
  if (type === 'polygon') {
    const _obj = new fabric.Polygon(obj.points)
    _obj.set({
      // @ts-ignore 初始点位的左上角角度的坐标
      tlCoordXy: [obj.left!, obj.top!],
      objectCaching: false,
      transparentCorners: false,
      hasBorders: false,
      fill: obj.fill,
      stroke: obj.color,
      selectable: false,
      type: type
    })

    return _obj
  }
  if (type === 'line' || type === 'dottedLine') {
    const line = new fabric.Line(
      [
        obj.x1,
        obj.y1, // 起始点坐标
        obj.x2,
        obj.y2 // 结束点坐标
      ],
      {
        type: type,
        strokeDashArray: type === 'dottedLine' ? [5, 5] : []
      }
    )
    line.setControlsVisibility({
      mt: false,
      mb: false,
      ml: false,
      mr: false
    })

    line.set({
      lockScalingFlip: obj.lockScalingFlip,
      fill: obj.fill,
      stroke: obj.stroke
    })

    return line
  }
  if (type === 'point') {
    const point = new fabric.Circle({
      left: obj.left,
      top: obj.top,
      strokeWidth: obj.strokeWidth,
      radius: 5,
      selectable: obj.selectable, // 允许选中
      hasControls: obj.hasControls, // 显示控制点
      hasBorders: obj.hasBorders, // 不显示边框
      type: obj.type,
      fill: obj.fill,
      stroke: obj.stroke
    })

    point!.setControlsVisibility({
      mt: false,
      mb: false,
      ml: false,
      mr: false,
      bl: false,
      br: false,
      tl: false,
      tr: false
    })
    return point
  }
}

//计算当前位置是否有一样的元素，如果有，则往右下偏移10像素
export const calcNewPosition = (markObjList: MarkObj[], obj: MarkObj, offsetValue = 10) => {
  const hasItem = markObjList.some(o => {
    if (obj.type === 'polygon') {
      return isEqual(o.points, obj.points)
    }
    return ~~o.left! === ~~obj.left! && ~~o.top! === ~~obj.top! && o.type === obj.type
  })
  console.log('hasItem', hasItem)

  if (hasItem) {
    // 线段在调整left、top的同时需要更改点位
    if (obj.type === 'line' || obj.type === 'dottedLine') {
      obj.set({
        top: obj.top! + offsetValue,
        left: obj.left! + offsetValue,
        x1: obj.x1! + offsetValue,
        y1: obj.y1! + offsetValue,
        x2: obj.x2! + offsetValue,
        y2: obj.y2! + offsetValue
      })
    } else if (obj.type === 'polygon') {
      obj.set({
        tlCoordXy: [obj.left, obj.top],
        points: obj.points!.map((p: { x: number; y: number }) => ({
          x: p.x + offsetValue,
          y: p.y + offsetValue
        }))
      })
    } else {
      obj.set({
        top: obj.top! + offsetValue,
        left: obj.left! + offsetValue
      })
    }
    calcNewPosition(markObjList, obj)
  }
}

//新增图形文字
export const createText = (textName: string, options: Record<string, any> = {}): fabric.IText => {
  // 创建 IText 对象
  const text = new fabric.IText(textName, {
    fontSize: 14,
    fill: '#fff',
    textAlign: 'center',
    type: 'text',
    selectable: false,
    evented: false,
    ...options
  })
  return text
}

// 计算多边形的中心点
function calculatePolygonCenter(polygon: fabric.Polygon) {
  let totalX = 0
  let totalY = 0
  const points = polygon.get('points')!

  // 计算所有顶点的坐标总和
  for (let i = 0; i < points.length; i++) {
    totalX += points[i].x
    totalY += points[i].y
  }

  // 计算平均值以获得中心点坐标
  const centerX = totalX / points.length
  const centerY = totalY / points.length

  return { x: centerX, y: centerY }
}

// 将图形文字写入图形
export const setMarkTagText = (canvas: fabric.Canvas, markObj: MarkObj, tagName: string) => {
  // 获取矩形中心点坐标
  const centerPoint = markObj!.getCenterPoint()
  // 多边形取中心值是参照left和right，会有问题，需要特殊处理
  if (markObj.type === 'polygon') {
    const point = calculatePolygonCenter(markObj as fabric.Polygon)
    centerPoint.x = point.x
    centerPoint.y = point.y
  }

  // 创建 IText 对象
  const text = createText(tagName)

  text.set({
    left: centerPoint.x - text.width! / 2,
    top: centerPoint.y - text.height! / 2,
    // @ts-ignore 标注对象id，方便删除
    markObjId: markObj.uid
  })

  markObj!.on('moving', function () {
    const centerPoint = markObj!.getCenterPoint()
    text.set({
      left: centerPoint.x - text.width! / 2,
      top: centerPoint.y - text.height! / 2
    })
  })
  markObj!.on('modified', function () {
    const centerPoint = markObj!.getCenterPoint()
    text.set({
      left: centerPoint.x - text.width! / 2,
      top: centerPoint.y - text.height! / 2
    })
  })
  markObj!.on('removed', function () {
    canvas.remove(text)
  })
  text.sendToBack()
  canvas.add(text)
  return text
}

/* 辅助线逻辑--------------------------------------------------------------- */
export class SubLine {
  private horizontalLine: fabric.Line | null
  private verticalLine: fabric.Line | null
  private canvas: fabric.Canvas

  constructor(canvas: fabric.Canvas) {
    this.horizontalLine = null
    this.verticalLine = null
    this.canvas = canvas
  }
  //增加辅助线
  init() {
    this.horizontalLine = new fabric.Line([-99999, 0, 99999, 0], {
      stroke: 'rgba(255, 245, 109, 0.70',
      strokeWidth: 1,
      selectable: false,
      evented: false,
      visible: false
    })
    this.verticalLine = new fabric.Line([0, -99999, 0, 99999], {
      stroke: 'rgba(255, 245, 109, 0.70',
      strokeWidth: 1,
      selectable: false,
      evented: false,
      visible: false
    })
    this.canvas.add(this.horizontalLine, this.verticalLine)
  }
  setVisible(visible: boolean) {
    if (!this.horizontalLine || !this.verticalLine) {
      console.error('请先初始化辅助线')
      return
    }
    this.horizontalLine?.set({ visible })
    this.verticalLine?.set({ visible })
    this.canvas.bringToFront(this.horizontalLine)
    this.canvas.bringToFront(this.verticalLine)
    this.canvas.renderAll()
  }
  updatePosition(x: number, y: number) {
    if (!this.horizontalLine || !this.verticalLine) {
      console.error('请先初始化辅助线')
      return
    }
    // 更新光标辅助线的位置
    this.horizontalLine.set({ y1: y, y2: y })
    this.verticalLine.set({ x1: x, x2: x })
  }
}
